<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="status_bar"></view>
		<myTopBar title="第三方检测现场监督记录表" url='../../static/index/img_dr.png'></myTopBar>

		<view class="content">
			<!-- 按钮 + 日期查询 -->
			<view class="content1">
				<!-- 按钮 -->
				<view class="content1-btn">
					第三方检测
				</view>
				<!-- 日期选择 -->
				<view class="content1-date">
					<view class="center-right-">
						<view class="center-right">
							<view class="center-right-inputSelect">
								<text>日期：</text>
								<input @click="visible=true,clickFlag=true" disabled type="text" v-model="data" />
								<view class="center-right-inputSelect-icon" @click="visible=false">
									<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
								</view>
							</view>
							<view :style="!changeFlag?'background-color: #58B6E5':'background-color: #414ce5'" @click="toSearch" class="center-right-btn">查询</view>
						</view>
						<picker-view @click="visible=false" v-if="visible" :value="value" @change="bindChange"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{index===0?'':item+'日'}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>
			<!-- 两个表格 -->
			<view class="content2">
				<!-- 表格 1 -->
				<view class="content2-table1">
					<u-table>
						<u-tr class="u-tr" style="background-color: #6096E6;height: 30rpx;">
							<u-td width="80rpx">主题</u-td>
							<u-td>第三方检测现场监督</u-td>
						</u-tr>
						<u-tr class="u-tr" style="height: 30rpx;">
							<u-td width="80rpx" style="color: #2169D3!important">日期</u-td>
							<u-td style="color: #2169D3!important">{{tableLeftData.testDate}}</u-td>
						</u-tr>
						<u-tr class="u-tr" style="height: 30rpx;">
							<u-td width="80rpx">参与人员</u-td>
							<u-td>{{tableLeftData.participants}}</u-td>
						</u-tr>
						<u-tr class="u-tr" style="height: 40rpx;">
							<u-td style="color: #2169D3!important">内容（检测描述）：{{tableLeftData.content}}</u-td>
						</u-tr>
						<u-tr class="u-tr" style="height: 90rpx;">
							<u-td v-for="(item,index) in tableLeftData.img">
								<image @click="toPre(item)" class="sceneImg" :src="item" mode="widthFix"></image>
							</u-td>
						</u-tr>
						<u-tr class="u-tr" style='background-color: #6096E6;height: 30rpx;'>
							<u-td width="60rpx">记录人</u-td>
							<u-td>{{tableLeftData.recorder}}</u-td>
						</u-tr>
					</u-table>
				</view>

				<u-popup v-model="show" mode="center">
					<view>
						<image :src="selectImgUrl" mode=""></image>
					</view>
				</u-popup>
				<!-- 表格 2 -->
				<view class="content2-table2">
					<scroll-view scroll-y="true">
						<u-table>
							<u-tr class="u-tr u-tr-title">
								<u-th :width="index===0?'50rpx':''" v-for="(item,index) in tableTitlelist" :key='index'
									class="u-th">{{item}}</u-th>
							</u-tr>

							<u-tr :style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
								:class="index===0?'u-tr-first':'u-tr'" v-for="(item,index) in tableDataList">
								<u-td width='50rpx'><text @click="toLeftTable(index)">{{index+1}}</text></u-td>
								<u-td >{{item.unit}}</u-td>
								<u-td >{{item.samplingTime}}</u-td>
								<u-td >{{item.content}}</u-td>
								<u-td >{{item.qualified==='0'?'否':'是'}}</u-td>
								<u-td  style="position: relative;">
									<u-icon name='photo-fill' class="photoIcon"></u-icon>
								</u-td>
							</u-tr>

							<u-empty icon-size='50' img-width='150' font-size="15" v-if="tableDataList.length===0"
								text="数据为空"></u-empty>
						</u-table>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = ['']
			const day = date.getDate()
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				background: {
					backgroundColor: '#2169D3'
				},
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1],
				visible: false,
				clickFlag: false,
				tableTitlelist: ['序号', '检测单位', '采样时间', '检测内容', '是否合格', '现场照片'],
				tableDataList: [],
				toSearchFlage: false,
				tableLeftData: {},
				show: false,
				selectImgUrl: "",
				changeFlag:false
			}
		},
		onLoad() {
			this.selectDetection()
		},
		computed: {
			data() {
				if (this.clickFlag) {
					if (this.day === undefined) {
						return this.year + '年' + this.month + '月'
					}
					return this.year + '年' + this.month + '月' + this.day + '日'
				} else {
					return ''
				}
			},
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange: function(e) {
				console.log(e.detail.value);
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.toSearchFlage = true
			},
			async toSearch() {
				this.changeFlag=true
				setTimeout(()=>{
					this.changeFlag=false
				},200)
				if (!this.toSearchFlage) {
					this.$u.toast("请选择日期后再查询！")
					return;
				}
				this.visible = false
				this.selectDetection()
			},
			/* 查询记录 */
			async selectDetection() {
				let param;
				let day;
				if (this.month < 10) {
					if (this.day === undefined) {

						day = this.year + '-0' + this.month

					} else {
						if (this.day < 10) {

							day = this.year + '-0' + this.month + "-0" + this.day

						} else {

							day = this.year + '-0' + this.month + "-" + this.day

						}
					}

				} else {
					if (this.day === undefined) {

						day = this.year + '-' + this.month

					} else {
						if (this.day < 10) {

							day = this.year + '-' + this.month + "-0" + this.day
						} else {

							day = this.year + '-' + this.month + "-" + this.day
						}
					}
				}
				if (this.day === undefined) {
					param = {
						month: day,
						type: 2
					}
				} else {
					param = {
						day,
						type: 1
					}
				}
				console.log(param);
				const res = await this.$u.api.selectDetection(param)
				if (!res.success) {
					return;
				}
				this.tableDataList = res.body.data
				this.tableDataList.forEach(item => {
					if (item.img != "") {
						item.img = item.img.split('|')

						item.img = item.img.map(item => {
							if (item != "") {
								return this.$u.baseUrl + item
							}
						})
					}
				})
				console.log(this.tableDataList);
				this.tableLeftData = this.tableDataList[0]
				console.log(this.tableLeftData);

			},
			toLeftTable(i) {
				this.tableLeftData = this.tableDataList[i]
			},
			toPre(url) {
				console.log(url);
				this.show = true
				this.selectImgUrl = url
			}
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}

	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	/* 顶部导航栏 */
	.topBar {
		display: flex;
		align-items: center;
		width: 100%;
		height: 50rpx;
		background-color: #2169D3;
	}

	.top-arrow {
		color: #FFFFFF;
		margin: 0 4rpx;
	}

	.top-left,
	.top-right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240rpx;
		height: 40rpx;
		background: url(../../static/index/button_an.png) no-repeat;
		background-size: 100% 100%;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.top-right {
		width: 420rpx;
	}

	/* content */
	.content {
		display: flex;
		flex-direction: column;
	}

	.content1 {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0rpx 38rpx;
		margin: 15rpx 0;
	}

	/* 按钮 */
	.content1-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 45rpx;
		background: url(../../static/index/img_dr.png) no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 18rpx;
	}

	/* 日期选择 */
	.center-right- {
		margin: 10rpx 0;
	}

	.center-right {
		display: flex;
		margin: 10rpx 20rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 180rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
	}

	.center-right-inputSelect input {
		width: 120rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
		color: #034AB2;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.picker-view {
		position: absolute;
		z-index: 9999;
		width: 140rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}

	.content2 {
		display: flex;
		align-items: center;
		justify-content: space-around;
		/* margin-top: -20rpx; */
	}

	/* 表格1 */
	.content2-table1 .u-table {
		width: 250rpx;
		font-size: 15rpx !important;
		margin-left: 26rpx;
		margin-top: 15rpx;
	}

	.content2-table1 .u-td {
		font-size: 12rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: left !important;
		color: #FFFFFF !important;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.content2-table1 .u-tr:nth-child(odd) {
		background-color: #6096E6;
	}

	.u-tr-first {
		margin-top: 40rpx;
	}

	.content2-table1 .u-tr:nth-child(even) {
		background-color: #D2DDF5;
		color: #2169D3 !important;
	}

	/* 表格2 */
	.content2-table2 {
		height: 230rpx;
	}

	.content2-table2 .u-table {
		height: 250rpx !important;
		width: 420rpx;
	}

	.content2-table2 .u-tr-title {
		position: fixed;
		width: 420rpx;
		z-index: 999;
		white-space: nowrap;
		overflow: hidden;
	}

	.content2-table2 .u-th,
	.content2-table2 .u-td {
		font-size: 15rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: center !important;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		height: 40rpx !important;
	}

	.content2-table2 .u-th {
		background-color: #6096E6;
		color: #FFFFFF;
	}

	.content2-table2 .u-td {
		color: #034AB2 !important;
	}

	.photoIcon {
		font-size: 20rpx;
		padding-left: 20rpx;
		color: #2169D3;
	}

	.closeIcon {
		position: absolute;
		right: 5rpx;
		top: 10rpx;
		/* margin-top: -20rpx; */
		color: #999;
	}

	.sceneImg {
		width: 110rpx;
	}
</style>
